<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="../templates/layout.xhtml">
	<ui:define name="content">
		<h:form prependId="false" id="categoryGraphDataForm">
			<p:panel id="data" toggleable="true" toggleSpeed="250">
				<f:facet name="header">
					<h:outputText value="#{messages.label_submenu_categorygraph}" />
				</f:facet>
				<h:panelGrid columns="1" width="100%">
					<p:spacer width="10" height="15" />
					<h:panelGrid columns="3">

						<h:outputText value="#{messages.label_graph_accounts}" />
						<h:outputText value="#{messages.label_graph_period}" />
						<h:outputText value="#{messages.label_categorygroups}" />

						<h:selectOneMenu value="#{bankTransactionBean.selectedAccount}">
							<f:selectItems value="#{bankTransactionBean.accountItems}" />
							<p:ajax event="change" update="expensesPerMonth,groupChart" />
						</h:selectOneMenu>

						<h:selectOneMenu value="#{bankTransactionBean.selectedTimeperiod}">
							<f:selectItem itemValue="0" itemLabel="#{messages.label_tp_all}" />
							<f:selectItem itemValue="1"
								itemLabel="#{messages.label_tp_two_years}" />
							<f:selectItem itemValue="2"
								itemLabel="#{messages.label_tp_one_year}" />
							<f:selectItem itemValue="3"
								itemLabel="#{messages.label_tp_six_months}" />
							<f:selectItem itemValue="4"
								itemLabel="#{messages.label_tp_three_months}" />
							<p:ajax event="change" update="expensesPerMonth,groupChart" />
						</h:selectOneMenu>

						<h:selectOneMenu
							value="#{bankTransactionBean.selectedCategoryGroup}">
							<f:selectItems value="#{bankTransactionBean.categoryGroupItems}" />
							<p:ajax event="change" update="expensesPerMonth,groupChart" />
						</h:selectOneMenu>

					</h:panelGrid>
					<p:spacer width="10" height="15" />
					<h:panelGrid id="expensesPerMonth" columns="1" width="100%">

						<p:accordionPanel value="#{bankTransactionBean.categories}"
							var="item" multiple="true">
							<p:tab title="#{item.categoryGroup.name} - #{messages.label_total}: #{item.totalAmountAsString}, #{messages.label_average}: #{item.averageAmountAsString}">
								<h:panelGrid columns="1" width="100%">
									<p:dataTable id="categoryTransactionList"
										value="#{item.expenseEntries}" var="entry"
										rendered="#{!empty item.expenseEntries}"
										widgetVar="categoryTransactionListWidget"
										resizableColumns="false" width="100%">

										<p:column id="bookingDateCol"
											headerText="#{messages.label_timeperiod}">
											<h:outputText value="#{entry.timeElementAsString}" />
										</p:column>

										<p:column id="amountCol" headerText="#{messages.label_value}">
											<h:outputText value="#{entry.value}"
												converter="currencyConverter" />
										</p:column>

									</p:dataTable>
									<p:spacer width="10" height="15" />
									<p:commandButton id="viewTransactionButton"
										icon="ui-icon-zoomin"
										value="#{messages.label_viewtransactions}"
										update=":transactionForm:transactionList"
										oncomplete="viewTransactionDialogWidget.show()"
										title="#{messages.label_view}"
										action="#{bankTransactionBean.displayTransactionsForCategory(item.index)}">
									</p:commandButton>
									<p:tooltip for="viewTransactionButton"
										value="#{messages.label_viewtransactions}" showEffect="fade"
										hideEffect="fade" />
								</h:panelGrid>
							</p:tab>
						</p:accordionPanel>

					</h:panelGrid>
					<p:spacer width="10" height="15" />
					<p:lineChart id="groupChart"
						value="#{bankTransactionBean.groupModel}" legendPosition="nw"
						title="#{messages.label_submenu_categorygraph}"
						style="height:500px;margin-top:20px"
						xaxisLabel="#{messages.label_x_time}"
						yaxisLabel="#{accountBean.currency}" />
				</h:panelGrid>
			</p:panel>
		</h:form>
		<!-- ui:include src="accountList.xhtml">
			<ui:param name="dataList"
				value="#{bankTransactionBean.selectedAccounts}" />
		</ui:include-->
		<p:dialog id="viewTransactionDialog"
			header="#{messages.label_view} Transactions" modal="true"
			widgetVar="viewTransactionDialogWidget" dynamic="true"
			resizable="true" maximizable="true" showEffect="fade"
			hideEffect="explode">
			<p:outputPanel id="viewTransactionPanel">
				<ui:include src="transactionList.xhtml">
					<ui:param name="rowsPerPage" value="10" />
				</ui:include>
			</p:outputPanel>
		</p:dialog>

	</ui:define>
</ui:composition>
</html>